import { memo } from 'react'
import { HomeStyle, ChartBoxStyle } from './style'
import { useMainStore } from '@/store/main'
import CardData from './c-cpns/CardData'
import { lineChartsFn, circleChartsFn } from './echart-option'
import Echarts from '@/components/Echarts'
// import Test from './c-cpns/Test'

const Home = memo(() => {
	const { userInfo } = useMainStore()

	return (
		<HomeStyle>
			<div className="banner">
				<p className="banner_title">脚踏实地，行稳致远，进而有为！</p>
				<p className="banner_text">欢迎回来 : {userInfo.nickName}</p>
			</div>
			<div className="home-data">
				<div className="chart-box">
					<CardData
						titleIcon="&#xe600;"
						circleName="people-circle"
						title="本月访问人数"
						number="1,536"
						numberType="up"
						message="51% 已超过上周"
					/>
				</div>
				<div className="chart-box">
					<CardData
						titleIcon="&#xe601;"
						circleName="order-circle"
						title="本月订单总数"
						number="326"
						numberType="down"
						message="12% 已少于上周"
					/>
				</div>
				<div className="chart-box">
					<CardData
						titleIcon="&#xe797;"
						circleName="pay-circle"
						title="本周支付金额"
						number="8,027"
						numberType="down"
						message="8% 已少于上周"
					/>
				</div>
				<div className="chart-box">
					<CardData
						titleIcon="&#xe64d;"
						circleName="sale-circle"
						title="本月销售总额"
						number="26,923"
						numberType="up"
						message="61% 已超过上周"
					/>
				</div>
			</div>
			<ChartBoxStyle>
				<div className="chart line-chart">
					<div className="title">折线图</div>
					<div className="chart-box">
						<Echarts option={lineChartsFn()} />
					</div>
				</div>
				<div className="chart circle-chart">
					<div className="title">饼图</div>
					<div className="chart-box">
						<Echarts option={circleChartsFn()} />
					</div>
				</div>
			</ChartBoxStyle>
		</HomeStyle>
	)
})

export default Home
